<!DOCTYPE html>
<html lang="cn" manifest="index.manifest">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
		/>
		<title>link</title>
		<link rel="stylesheet" href="css/icon.css" />
		<link rel="stylesheet" href="css/link.css" />
		<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
	</head>
	<body>
		<div id="app">
			<header class="flex-alc">
				<div class="header-left flex-alc">
					<i class="gonmjv cuIcon-qrcode" @click="toolsclk"></i>
					<i class="add cuIcon-add" @click="appadd"></i>
				</div>
				<div class="header-rigth flex-alc">
					<i class="cuIcon-triangleupfill" @click="scrolltop"></i>
					<i class="cuIcon-triangledownfill" @click="scrollbotton"></i>
				</div>
			</header>

			<Transition name="fade" mode="out-in">
				<div class="content flex-alc" v-show="toolsShow">
					<div class="card">
						<div class="card-title flex-alc">
							<i class="cuIcon-selection"></i>
							<h3>推荐</h3>
						</div>
						<card-item v-if="state.tuiJianlist.length" :list="state.tuiJianlist" @carddel="appcarddel"></card-item>
						<div v-else class="kong-icon">
							<i class="cuIcon-deliver"></i>
							<i class="cuIcon-sort"></i>
						</div>
					</div>

					<div class="card">
						<div class="card-title flex-alc">
							<i class="cuIcon-hot"></i>
							<h3>未读</h3>
						</div>
						<card-item v-if="state.weidulist.length" :list="state.weidulist" @carddel="appcarddel"></card-item>
						<div v-else class="kong-icon">
							<i class="cuIcon-deliver"></i>
							<i class="cuIcon-sort"></i>
						</div>
					</div>

					<div class="card">
						<div class="card-title flex-alc">
							<i class="cuIcon-medal"></i>
							<h3>读完</h3>
						</div>
						<card-item v-if="state.weidulist.length" :list="state.duwulist" @carddel="appcarddel"></card-item>
						<div v-else class="kong-icon">
							<i class="cuIcon-deliver"></i>
							<i class="cuIcon-sort"></i>
						</div>
					</div>
				</div>
			</Transition>

			<Transition name="fade" mode="out-in">
				<div class="content flex-alc" v-show="!toolsShow">
					<export-file></export-file>
					<sea-rch></sea-rch>
					<del-Item></del-Item>
				</div>
			</Transition>

			<Transition name="fade" mode="out-in">
				<form-view @submit="appSubmit" />
			</Transition>
		</div>
	</body>

	<!-- 小说item组件 -->
	<template id="cardItem">
		<div
			class="card-item"
			v-for="(item,index) in list"
			:key="item.title"
			:class="{'bd-button':list.length-1 !== index}"
		>
			<div class="card-item-name flex-alc">
				<h4 class="text-dwoe">{{item.title}}</h4>
				<span class="card-status" v-if="item.duwan == 1">--读完--</span>
			</div>
			<div class="card-item-link flex-alc">
				<span class="card-item-chapter"><i class="cuIcon-rank ci-chapter-icon"></i>{{chapterstr(item.chapter)}}</span>
				<a :href="item.url" target="_blank"> 首链接 </a>
				<a :href="item.chapterUrl" target="_blank"> 后续章节链接 </a>
				<div class="card-item-but flex-alc">
					<div class="but-success" @click="cardupdate(item)">修改</div>
					<div class="but-error" @click="carddel(item)">删除</div>
				</div>
			</div>
			<div class="card-item-beizhu text-dwoe" v-if="item.beizhu && item.beizhu.length > 0">{{item.beizhu}}</div>
		</div>
	</template>

	<!-- 添加修改组件 -->
	<template id="formView">
		<div class="form-view" v-show="form.isshow">
			<div class="mask" @click="hiheclk"></div>
			<div class="update">
				<p>小说-推荐</p>
				<el-radio-group v-model="form.data.recommended">
					<el-radio label="0" size="large">小说</el-radio>
					<el-radio label="1" size="large">推荐</el-radio>
				</el-radio-group>

				<div v-for="(vitem,index) in viewdata" :key="vitem.title">
					{{vitem.txt}}
					<div class="update-input">
						<el-input v-model="form.data[vitem.inputkey]" clearable />
					</div>
				</div>

				<p>是否把小说读完</p>
				<el-radio-group v-model="form.data.duwan">
					<el-radio label="0" size="large">没读完</el-radio>
					<el-radio label="1" size="large">读完</el-radio>
				</el-radio-group>

				<div class="update-input">
					<i class="textarea-icon cuIcon-roundclose" @click="textareaiconclk"> </i>
					备注： <el-input v-model="form.data.beizhu" clearable type="textarea" :rows="4" maxlength="255" />
				</div>
				<div class="update-but but-color-success" @click="submitclk">确定</div>
				<div class="update-but but-color-error" @click="hiheclk">取消</div>
			</div>
		</div>
	</template>

	<!-- 导出数据组件 -->
	<template id="exportFlie">
		<div class="card">
			<div class="export-file flex-alc bd-button">
				<div class="ex-title flex-alc">
					<i class="cuIcon-favor"></i>
					导出数据库数据
				</div>
				<el-button class="ex-but" color="#18a058" type="danger" plain @click="exportallclk">
					<i class="cuIcon-forward"></i>
				</el-button>
			</div>
			<div class="export-file flex-alc">
				<div class="ex-title flex-alc">
					<i class="cuIcon-favor"></i>
					导出本地数据
				</div>
				<el-button class="ex-but" color="#18a058" type="danger" plain @click="exportlocalclk">
					<i class="cuIcon-forward"></i>
				</el-button>
			</div>
		</div>
	</template>

	<!-- 搜索组件 -->
	<template id="search">
		<div class="card">
			<div class="card-title flex-alc">
				<i class="cuIcon-search"></i>
				<h3>搜索</h3>
			</div>
			<div class="search-input"><el-input v-model="searchState.inpstr" placeholder="搜索内容" clearable /></div>
			<div class="search-list" v-show="searchState.searchList.length">
				<card-Item :list="searchState.searchList" />
			</div>
		</div>
	</template>

	<!-- 回收站组件 -->
	<template id="delItem">
		<div class="card">
			<div class="card-title flex-alc">
				<i class="cuIcon-delete"></i>
				<h3>回收站</h3>
			</div>
			<div
				class="card-item"
				v-if="list.length"
				v-for="(item,index) in list"
				:key="item.title"
				:class="{'bd-button':list.length-1 !== index}"
			>
				<div class="card-item-name flex-alc">
					<h4 class="text-dwoe">{{item.title}}</h4>
				</div>
				<div class="card-item-link flex-alc">
					<a :href="item.url" target="_blank"> 首链接 </a>
					<a :href="item.chapterUrl" target="_blank"> 后续章节链接 </a>
					<div class="card-item-but flex-alc">
						<div class="but-success del-but" @click="recoveryclk(item,index)">恢复</div>
					</div>
				</div>
			</div>
			<div v-else class="kong-icon">
				<i class="cuIcon-deliver"></i>
				<i class="cuIcon-sort"></i>
			</div>
		</div>
	</template>

	<!-- 导航栏一个  有返回顶部 到底部 -->
	<!-- 暂时本地存储  可crud的那种  保存数据文件下载 -->
	<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/qs/6.10.3/qs.min.js"></script>
	<script src="./js/vue.global.js"></script>
	<script src="//unpkg.com/element-plus"></script>
	<script src="./js/index.js" type="module"></script>
</html>
